import loginLeft from "./login_left.png";
import "./login.less"
import {Button, Form, Input} from "antd";
import HFormItem from "@/components/ant-ext/HFormItem";
import React, {useEffect, useState} from "react";
import {LockOutlined, SafetyCertificateOutlined, UserOutlined} from "@ant-design/icons";
import Constant from "@/config/constant";
import {useHandle} from "@/common/hooks";
import Common from "@/api/common-login";
import {useSearchParams} from "react-router-dom";
import cookie from "@/common/cookie";

export default function Index() {
    const [searchParams] = useSearchParams()
    const [form] = Form.useForm()
    const [captcha, setCaptcha] = useState("")
    const [loading, setLoading] = useState(false)
    useEffect(() => {
        if (cookie.getCookie("token")) {
            window.location.href = Constant.LayoutHome;
        }
    }, [])

    const refreshCaptcha = useHandle(() => {
        Common.DoGetCaptcha({
            success: (data) => {
                setCaptcha(data.base64)
            }
        })
    }, [])

    return <>
        <div className="login-container">
            <div className="login-box">
                <div className="login-left">
                    <img src={loginLeft} alt="login"/>
                </div>
                <div className="login-form">
                    <div className="login-logo">
                        <span className="logo-text">{Constant.WebsiteName}</span>
                    </div>
                    <Form form={form}
                          name="basic"
                          labelCol={{span: 5}}
                          initialValues={{remember: true}}
                          onFinish={() => {
                              Common.DoLogin({
                                  body: form.getFieldsValue(), setLoading, success: (data) => {
                                      const to = searchParams.get("to")
                                      if (to !== null) {
                                          window.location.href = to
                                      } else {
                                          window.location.href = Constant.LayoutHome
                                      }
                                  }
                              })
                          }}
                          size="large"
                          autoComplete="off">
                        <HFormItem rules={[{required: true, message: '请输入用户名'}]} name={"loginName"}
                                   placeholder={"请输入用户名"}
                                   prefix={<UserOutlined/>}/>
                        <HFormItem rules={[{required: true, message: '请输入验证码'}]} name={"loginPwd"}>
                            <Input.Password autoComplete="new-password" placeholder={"请输入密码"}
                                            prefix={<LockOutlined/>}/>
                        </HFormItem>
                        <HFormItem
                            prefix={<SafetyCertificateOutlined className="site-form-item-icon"/>}
                            name={"captcha"}
                            rules={[{required: true, message: '请输入验证码'}, {len: 5, message: "验证码长度为5"}]}
                            placeholder={"请输入验证码"}
                            addonAfter={<img src={captcha} style={{height: 37, width: 125}}
                                             onClick={refreshCaptcha} alt={"验证码"}/>}/>

                        <Button style={{width: "100%"}} type="primary" htmlType="submit" loading={loading}>
                            登陆
                        </Button>
                    </Form>
                </div>
            </div>
        </div>
    </>
}